<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
<div style="margin-left: 20px; margin-top: 20px">
    <select id="sel1" class="selectpicker show-tick" data-size="10">
        <option>甘井子区</option>
        <option>沙河口区</option>
        <option>高新园区</option>
    </select>
    <select id="sel2" class="selectpicker show-tick" data-size="10">
        <option>所有</option>
        <option>一居室</option>
        <option>二居室</option>
        <option>三居室</option>
    </select>
    <button type="button" class="btn btn-light" id="btn">确定</button>
</div>
{% include 'lib.html' %}
{% load staticfiles %}
<script type="text/javascript">
    $('#sel1').selectpicker('val', "{{ a }}");
    $('#sel2').selectpicker('val', "{{ b }}");
</script>
<div style="margin: 20px">
    <table class="table" style="margin: auto">
        <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">address</th>
            <th scope="col">price(Yuan)</th>
            <th scope="col">floor</th>
            <th scope="col">room</th>
            <th scope="col">space</th>
            <th scope="col">category</th>
            <th scope="col">band</th>
        </tr>
        </thead>
        <tbody>
        {% for contact in contacts %}
            <tr>
                <th>{{ contact.id }}</th>
                <th>{{ contact.address }}</th>
                <th>{{ contact.price }}</th>
                <th>{{ contact.floor }}</th>
                <th>{{ contact.room }}</th>
                <th>{{ contact.space }}</th>
                <th>{{ contact.category }}</th>
                <th>{{ contact.band }}</th>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script type="text/javascript">
    function get_common() {
        return '?area=' + $('#sel1').val() + '&room=' + $('#sel2').val();
    }

    function get_next() {
        {% if contacts.has_next %}
            window.location = get_common() + "&page={{ contacts.next_page_number }}";
        {% endif %}
    }

    function get_last() {
        {% if contacts.has_next %}
            window.location = get_common() + "&page={{ contacts.paginator.num_pages }}";
        {% endif %}

    }

    function get_first() {
        window.location = get_common() + "&page=1";
    }

    function get_pre() {
        {% if contacts.has_previous %}
            window.location = get_common() + "&page={{ contacts.previous_page_number }}";
        {% endif %}
    }

    $('#btn').click(function () {
        window.location = get_common() + '&page=1';
    });
</script>

<nav aria-label="Page navigation example" style="margin-left: 45%">
    <ul class="pagination">
        {% if contacts.has_previous %}
            <li class="page-item"><a class="page-link" href="#" onclick="get_first()">first</a></li>
            <li class="page-item"><a class="page-link" href="#" onclick="get_pre()">pre</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#">first</a></li>
            <li class="page-item disabled"><a class="page-link" href="#">pre</a></li>
        {% endif %}
        {% if contacts.has_next %}
            <li class="page-item"><a class="page-link" href="#" onclick="get_next()">next</a></li>
            <li class="page-item"><a class="page-link" href="#" onclick="get_last()">last</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#">next</a></li>
            <li class="page-item disabled"><a class="page-link" href="#">last</a></li>
        {% endif %}
        <li class="page-item" style="margin-top: 7px; margin-left: 5px">Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.</li>

    </ul>
</nav>

<div style="margin-left: 10px; font-size: 25px">
    <a href="/index"><u>&lt;&lt;back</u></a>
</div>
<script type="text/javascript">
    $(function () {
        $('#sel1').selectpicker('val', '{{ area }}');
        $('#sel2').selectpicker('val', '{{ room }}');
    });
</script>
</body>
</html>
